<#include "/admin/common/header.ftl">
<link href="/plugins/datetimepicker/datetimepicker.min.css" rel="stylesheet">
<link href="/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<body class="with-padding">
<div id="toolbar" class="form-inline" style="line-height: normal;">
    <div class="form-group">
        <label>开始时间：</label>
        <div style="width: 200px;display: inline-block;vertical-align: middle;">
            <div class="input-group date form-date1">
                <input class="form-control" required name="startTime" readonly>
                <span class="input-group-addon"><span class="icon-calendar"></span></span>
            </div>
	    </div>
    </div>
    <div class="form-group">
        <label>结束时间：</label>
	    <div style="width: 200px;display: inline-block;vertical-align: middle;">
            <div class="input-group date form-date2">
                <input class="form-control" required name="endTime" readonly>
                <span class="input-group-addon"><span class="icon-calendar"></span></span>
		    </div>
	    </div>
    </div>
    <button class="btn btn-primary" onclick="search()" type="button"><i class="icon icon-search"></i>查询</button>
</div>
<table id="dataGrid" class="table"></table>
<#include "/admin/common/footer.ftl">
<script src="/plugins/datetimepicker/datetimepicker.min.js"></script>
<script src="/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
    var dg = $('#dataGrid').bootstrapTable({
        method: "get",//请求方式
        url: "/admin/order/getOrderList",//数据源
        uniqueId: "orderId",
        dataField: "list",
        pagination: true,//是否分页
        clickToSelect: true,
        singleSelect: true,
        toolbar: "#toolbar",
        sidePagination: "server",//服务端分页
        queryParamsType: "",
        queryParams: function (params) {
            params.memberId = "${memberId!}";
            params.status = "${status!}";
            params.startTime = $("input[name='startTime']").val();
            params.endTime = $("input[name='endTime']").val();
            return params;
        },
        columns: [
            {
                checkbox: true
            },
            {
                title: "订单编号",
                field: "orderNum"
            },
            {
                title: "会员名称",
                field: "memberName"
            },
            {
                title: "下单时间",
                field: "createTime"
            },
            {
                title: "收货人",
                field: "consignee"
            },
            {
                title: "手机号",
                field: "mobile"
            },
            {
                title: "收货地址",
                field: "address"
            },
            {
                title: "订单金额",
                field: "totalAmount",
                formatter: function (val, row) {
                    return (val + row.postage).toFixed(2) + "元"
                }
            },
            {
                title: "实付金额",
                field: "tradeAmount",
                formatter: function (val, row) {
                    return (row.totalAmount + row.postage - row.payed).toFixed(2) + "元"
                }
            },
            {
                title: "订单状态",
                field: "statusS",
                formatter: function (val, row) {
                    if (row.status == 1) {
                        return "<span class='text-warning'>" + val + "</span>";
                    } else if (row.status == 3) {
                        return "<span class='text-important'>" + val + "</span>";
                    } else if (row.status == 4) {
                        return "<span class='text-info'>" + val + "</span>";
                    } else if (row.status == 10) {
                        return "<span class='text-success'>" + val + "</span>";
                    } else if (row.status == 11) {
                        return "<span class='text-danger'>" + val + "</span>";
                    } else {
                        return val;
                    }
                }
            },
            {
                title: "操作",
                field: "",
                align: "center",
                formatter: function (val, row) {
                    if (row.status == 3) {
                        return "<button class=\"btn btn-link\" onclick=\"view(" + row.orderId + ")\" type=\"button\"><i class=\"icon " +
                                "icon-bell\"></i>去处理</button>";
                    } else {
                        return "<button class=\"btn btn-link\" onclick=\"view(" + row.orderId + ")\" type=\"button\"><i class=\"icon " +
                                "icon-eye-open\"></i>查看详情</button>";
                    }
                }
            }
        ]
    });

    $(".form-date1").datetimepicker({
        format: 'yyyy-mm-dd 00:00:00',//显示格式
        minView: "month",//设置只显示到月份
        autoclose: true,//选中自动关闭
        todayBtn: true//显示今日按钮
    }).on("change", function () {
        $(this).datetimepicker("setEndDate", $("input[name='endTime']").val());
        $('.form-date2').datetimepicker("setStartDate", $("input[name='startTime']").val());
    });

    $('.form-date2').datetimepicker({
        format: 'yyyy-mm-dd 23:59:59',//显示格式
        minView: "month",//设置只显示到月份
        autoclose: true,//选中自动关闭
        todayBtn: true//显示今日按钮
    }).on("change", function () {
        $(this).datetimepicker("setStartDate", $("input[name='startTime']").val());
        $('.form-date1').datetimepicker("setEndDate", $("input[name='endTime']").val());
    });

    function view(orderId) {
        location.href = "/admin/order/orderDetail?orderId=" + orderId;
    }

    function search() {
        dg.bootstrapTable('refresh');
    }
</script>
</body>
</html>